/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-06 11:15:17
 */
import { Resume } from '@/interface/resume'
import { errorTips, successTips } from '@/utils'
import { isEmpty, isNil } from 'ramda'
import { computed, defineComponent, PropType, ref } from 'vue'
import { useRoute } from 'vue-router'
import { saveAs } from 'file-saver'
import cv1 from '@/assets/image/resume/cv-1.png'
import { FormUpload } from '@/components'
import { OssData } from '@/components/upload'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { RuleObject } from 'ant-design-vue/lib/form/interface'
import './style.scss'
const emailreg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
function emailValidator(rule: RuleObject, value: string) {
	if (!new RegExp(emailreg).test(value)) {
		return Promise.reject('请输入正确的邮箱地址')
	}
	return Promise.resolve()
}
const rules = {
	name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	sex: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	nativePlace: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	message: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	sendEmail: [{ required: true, trigger: 'blur', validator: emailValidator }],
	mail: [{ required: true, trigger: 'blur', validator: emailValidator }],
	education: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	phone: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	experience: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	occupation: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	title: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	count: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
}
const props = {
	dataSource: {
		type: Object as PropType<Resume>,
		required: true,
	},
} as const
export default defineComponent({
	props,
	emits: ['getResume'],
	setup(props, { emit }) {
		const userId = localStorage.getItem('userId') as string
		const $route = useRoute()
		const antdForm = ref<AntdFrom>()
		const pageState = ref({
			isEdit: false,
			loading: false,
			data: {} as Resume,
		})
		/** 是否编辑 */
		const isEdit = computed(() => {
			return !isNil($route.params.id)
		})
		/** 上传PDF简历 */
		async function handleChangePDF(data: OssData) {
			pageState.value.data.PDFUrl = data.url
		}
		async function onSubmit() {
			const ok = await antdForm.value?.validate().then(
				() => null,
				() => true
			)
			if (ok) {
				return
			}
			const params = {
				userId,
				PDFUrl: pageState.value.data.PDFUrl,
				education: pageState.value.data.education,
				experience: pageState.value.data.experience,
				mail: pageState.value.data.mail,
				name: pageState.value.data.name,
				nativePlace: pageState.value.data.nativePlace,
				occupation: pageState.value.data.occupation,
				sex: pageState.value.data.sex,
				phone: pageState.value.data.phone,
			}
			pageState.value.loading = true
			const { success } = await API.blog.resume.updateUserResume.request(params)
			pageState.value.loading = false
			if (success) {
				successTips('更新个人资料成功')
				onCancel()
				emit('getResume', pageState.value.data)
			}
		}
		function onCancel() {
			pageState.value.isEdit = false
			pageState.value.loading = false
			pageState.value.data = {}
		}
		return () => (
			<div class="home-content" id="home-section">
				{isEdit.value && (
					<div class="edit">
						{pageState.value.isEdit ? (
							<a-button
								type="primary"
								onClick={() => {
									pageState.value.data = { ...props.dataSource }
								}}
							>
								编辑
							</a-button>
						) : (
							<>
								<a-button type="primary" loading={pageState.value.loading} onClick={onSubmit}>
									确认
								</a-button>
								<a-button loading={pageState.value.isEdit} onClick={onCancel}>
									取消
								</a-button>
							</>
						)}
					</div>
				)}
				<div class="download-cv">
					<a
						href="#"
						class="theme-btn download-btn"
						onClick={() => {
							if (isEmpty(props.dataSource?.PDFUrl) && !isEdit.value) {
								errorTips('暂无下载地址')
								return
							}
							if (!pageState.value.isEdit) return
							saveAs(props.dataSource?.PDFUrl as string, `${props.dataSource?.name}个人简历`)
						}}
					>
						<i class="icon">
							<img src={cv1} alt="" />
						</i>
						{!pageState.value.isEdit ? (
							<FormUpload
								onChange={handleChangePDF}
								style="height:100%"
								accept=".pdf"
								reg={'.(pdf)$'}
								v-slots={{
									text: () => <span class="txt">上传简历</span>,
								}}
							/>
						) : (
							<span class="txt">下载简历</span>
						)}
					</a>
				</div>
				<div class="welcome">
					{pageState.value.loading && <LoadingOutlined style="font-size: 40px" class="loadingOutlined flexBox" />}
					<h4>个人资料</h4>
					<a-form
						class="ant-advanced-search-form"
						model={pageState.value.data}
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 16 }}
						rules={rules}
						ref={antdForm}
					>
						<ul class="text">
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="name" label="姓名">
											<a-input v-model={[pageState.value.data.name, 'value']} placeholder="请输入姓名" />
										</a-form-item>
									) : (
										`姓    名：${props.dataSource?.name ?? ''}`
									)}
								</p>
							</li>
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="sex" label="性别">
											<a-input v-model={[pageState.value.data.sex, 'value']} placeholder="请输入性别" />
										</a-form-item>
									) : (
										`性    别：${props.dataSource?.sex ?? ''}`
									)}
								</p>
							</li>
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="nativePlace" label="籍贯">
											<a-input v-model={[pageState.value.data.nativePlace, 'value']} placeholder="请输入籍贯" />
										</a-form-item>
									) : (
										`籍	  贯：${props.dataSource?.nativePlace ?? ''}`
									)}
								</p>
							</li>
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="mail" label="邮箱">
											<a-input v-model={[pageState.value.data.mail, 'value']} placeholder="请输入邮箱" />
										</a-form-item>
									) : (
										`邮    箱：${props.dataSource?.mail ?? ''}`
									)}
								</p>
							</li>
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="education" label="学历">
											<a-input v-model={[pageState.value.data.education, 'value']} placeholder="请输入学历" />
										</a-form-item>
									) : (
										`学    历：${props.dataSource?.education ?? ''}`
									)}
								</p>
							</li>
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="phone" label="电话">
											<a-input v-model={[pageState.value.data.phone, 'value']} placeholder="请输入电话" />
										</a-form-item>
									) : (
										`电    话：${props.dataSource?.phone ?? ''}`
									)}
								</p>
							</li>
							<li>
								<p>
									{pageState.value.isEdit ? (
										<a-form-item name="experience" label="工作经验">
											<a-input v-model={[pageState.value.data.experience, 'value']} placeholder="请输入工作经验" />
										</a-form-item>
									) : (
										`工作经验：${props.dataSource?.experience ?? ''}`
									)}
								</p>
							</li>
							{pageState.value.isEdit && (
								<>
									<li>
										<a-form-item name="occupation" label="职业">
											<a-input v-model={[pageState.value.data.occupation, 'value']} placeholder="请输入职业" />
										</a-form-item>
									</li>
									<li>
										<a-form-item name="PDFUrl" label="简历地址">
											<a-textarea
												rows={4}
												v-model={[pageState.value.data.PDFUrl, 'value']}
												placeholder="请输入简历地址"
											/>
										</a-form-item>
									</li>
								</>
							)}
						</ul>
					</a-form>
				</div>
			</div>
		)
	},
})
